<template>
  <Transition @enter="onEnter" appear>
    <h1 class="title">
      <span>{{ prefix }}</span>
      <span id="type-writer"></span>
    </h1>
  </Transition>
</template>

<script setup>
import { gsap } from 'gsap'
import { TextPlugin } from 'gsap/TextPlugin'

const props = defineProps({
  prefix: {
    type: String,
    default: 'Call me '
  },
  texts: {
    type: Array,
    required: true,
    validator(value) {
      if (value.length === 0) {
        console.warn('texts 数组不能为空！')
        return false
      }
      const haveTextProp = value.every((item) => item.text)
      if (!haveTextProp) {
        console.warn('texts 数组中的每一项必须包含 text 属性！')
      }
      return haveTextProp
    }
  }
})

// 关闭曲线动画效果
gsap.defaults({ ease: 'none' })
// 注册文本插件
gsap.registerPlugin(TextPlugin)

const genTextWriterTL = (el, text, done, color = '#000') => {
  return gsap
    .timeline({
      delay: 0.5,
      repeat: 1,
      yoyo: true,
      repeatDelay: 0.5
    })
    .set(el, { color })
    .to(el, {
      text,
      duration: (2 / 12) * text.length,
      onReverseComplete: done
    })
}

const onEnter = (el, done) => {
  // 创建时间线动画
  // gsap.timeline(配置对象).to(动画效果)
  // 1. 创建 timeline 动画的容器（队列）
  const tl = gsap.timeline({ repeat: -1 })
  const animateEl = el.querySelector('#type-writer')

  // 2. tl.add() 方法，添加多个 timeline 动画效果
  props.texts.forEach((item) => {
    tl.add(genTextWriterTL(animateEl, item.text, done, item.color || '#000'))
  })
}
</script>

<style scoped></style>
